<template>
  <div>
    <van-sticky>
    <div class="redTltle">
      <van-row>
        <van-col span="2"><van-icon name="arrow-left" @click="routerBack" /></van-col>
        <van-col span="5"  offset="8"><div class="redTltle">整刊展示</div></van-col>
      </van-row>
    </div>

      <!--    搜索框-->
      <div style="padding: 0.3rem 0.2rem;background-color: #efefef">
        <van-row>
          <van-col span="5" class="bgimg">
            <!--          <div>-->
            <!--            {{value}}-->
            <!--          </div>-->
            <van-field
                readonly
                clickable
                :value="value"
                :placeholder="columns[0].name"
                @click="showPicker = true"
            />
            <van-popup v-model="showPicker" round position="bottom">
              <van-picker
                  show-toolbar
                  value-key="name"
                  :columns="columns"
                  @cancel="showPicker = false"
                  @confirm="onConfirm"
              />
            </van-popup>
          </van-col>
          <van-col span="16">
            <van-cell-group>
              <van-field v-model="searchValue" placeholder="全部文献搜索"/>
            </van-cell-group>
          </van-col>
          <van-col span="3">
            <div class="searchBtn" @click="searchBtn">
              搜索
            </div>
          </van-col>

        </van-row>
      </div>
      <!--    搜索框end-->

      <!--    小标题-->
      <div class="redText">
        公开出版
      </div>
      <div class="bookpage">
        <van-row>
          <van-col span="3" offset="1">
            <div>共{{ count }}条</div>
          </van-col>
          <van-col span="4" offset="11">
            <div class="DXFXxgdx" @click="clickcategory(1)" :class="{active:categoryIndex==1}">党校发行</div>
          </van-col>
          <van-col span="5">
            <div class="DXFXxgdx" @click="clickcategory(2)" :class="{active:categoryIndex==2}">相关党建</div>
          </van-col>
          <!--        <van-col span="1" offset="16"> <van-icon name="filter-o" /></van-col>-->
          <!--        <van-col span="2"><div>筛选</div></van-col>-->
        </van-row>
      </div>
    </van-sticky>
      <!--    小标题en'd-->
      <!--    list-->
      <div class="bookList">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              offset="50"
          >
            <div class="bookList">
              <div v-for="(item , index) in imgBook" :key="index" class="items" @click="bookDetails(item , index)">
                <div>
                  <van-image
                      width="2.547rem"
                      height="3.6rem"
                      :src="ip + item.pinyinName + '.Jpg'"
                  />
                </div>
                <div class="bookTitlt">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
      <!--    list-->

  </div>
</template>

<script>
import {search} from '@/api/journalApi/openApi'
import {Toast} from "vant";
export default {
  name: "open",
  data() {
    return {
      asd:2,
      code:'source_cykm',//默认下拉的code
      page:1,
      ip: 'https://c61.cnki.net/CJFD/big/', //热门文章拼接url
      count:0,
      loading: false,  //是否底部加载更多处于加载状态   底部加载中
      finished: false, //是否加载完成 加载完成 不在加载    已经底了
      refreshing: false, //是否处于下拉刷新状态  顶部刷新中
      categoryIndex: 1, //党校发行和相关党校
      value: '刊名', //下拉值
      searchValue: '',//输入值
      showPicker: false, //遮罩层
      columns: [{name:'刊名',code:'source_cykm'},{name:'主办单位',code:'publisher'}
        ,{name:'CN',code:'cn'},{name:'ISSN',code:'issn'}],

      imgBook: [
        {
          name: '安徽行政学院学报',
          url: require('../../assets/book_gkcb.png'),
        },
        {
          name: '中国改革',
          url: require('../../assets/book_xq.png'),
        },
        {
          name: '安徽行政学院学报',
          url: require('../../assets/book_gkcb.png'),
        },
        {
          name: '中国改革',
          url: require('../../assets/book_xq.png'),
        },
        {
          name: '安徽行政学院学报',
          url: require('../../assets/book_gkcb.png'),
        },
        {
          name: '中国改革',
          url: require('../../assets/book_xq.png'),
        },
        {
          name: '安徽行政学院学报',
          url: require('../../assets/book_gkcb.png'),
        },
        {
          name: '中国改革',
          url: require('../../assets/book_xq.png'),
        },
        {
          name: '安徽行政学院学报',
          url: require('../../assets/book_gkcb.png'),
        },
        {
          name: '中国改革',
          url: require('../../assets/book_xq.png'),
        },

      ]
    };
  },
  created() {
   // 1 :党校发行 2:相关党建
    //默认请求 加载 党校发行
    let list = {
      "type": "1",
      "sortCodeList": [],
      "page": 1,
      "pageSize": 18,
      searchType:'',
      searchValue:'',
    }
    search(list)
        .then(res=>{
        //  console.log(res)
          this.count = res.data.data.count
          this.imgBook = res.data.data.list
        })

  },
  methods: {
    //返回按钮
    routerBack(){
      this.$router.go(-1)
    },
    //无限加载函数
    onLoad() {
      setTimeout(() => {
        //下拉刷新 数据清零
        if (this.refreshing) {
          this.imgBook = []
          this.refreshing = false;  //判断如果下拉刷新就请求第一页刷新
          this.page = 1
          //console.log('第一个')
        }
        //判断上滑加载是发行党校 还是相关党校
        if(this.categoryIndex===1){   //判断党校发行 传不同的type 1
          var list = {
            "type": "1",
            "sortCodeList": [],
            "page": this.asd++,   //因为有第一页数据 所以从第二页自增长
            "pageSize": 18,
            searchType:this.code,
            searchValue:this.searchValue,
          }
        }else if(this.categoryIndex===2){  //判断相关党建 传不同的type 2
            list = {
            "type": "2",
            "sortCodeList": [],
            "page": this.asd++,  //因为有第一页数据 所以从第二页自增长
            "pageSize": 18,
            searchType:this.code,
            searchValue:this.searchValue,
          }
        }
       // console.log(this.page)
        // 加载无限下划请求
        search(list)
            .then(res=>{
             //console.log(list)
              this.count = res.data.data.count  //总条数
              this.imgBook.push.apply( this.imgBook,res.data.data.list)  //合并请求数组
            })

         //console.log('到底了')
        this.loading = false;
        //总长度和总页数相等 停止请求回调
        if (this.imgBook.length >= this.count) {  //如果总条数
          this.finished = true;
        }
      }, 1000);
    },
    //下拉刷新完成回调函数 数据重新加载
    onRefresh() {
      // 清空列表数据

      this.finished = false;
      //下拉刷新 数据清零
      if (this.refreshing) {
        this.imgBook = []
        this.refreshing = false;  //判断如果下拉刷新就请求第一页刷新
        // console.log('第一个')
      }
      // 重新加载数据
      // // 将 loading 设置为 true，表示处于加载状态
      // this.loading = true;
      //判断上滑加载是发行党校 还是相关党校
      if(this.categoryIndex===1){   //判断党校发行 传不同的type 1
        var list = {
          "type": "1",
          "sortCodeList": [],
          "page": 1,   //因为有第一页数据 所以从第二页自增长
          "pageSize": 18,
          searchType:this.code,
          searchValue:this.searchValue,
        }
      }else if(this.categoryIndex===2){  //判断相关党建 传不同的type 2
        list = {
          "type": "2",
          "sortCodeList": [],
          "page": 1,  //因为有第一页数据 所以从第二页自增长
          "pageSize": 18,
          searchType:this.code,
          searchValue:this.searchValue,
        }
      }
      // 加载无限下划请求
      search(list)
          .then(res=>{
            // console.log(list)
            this.count = res.data.data.count  //总条数
            this.imgBook = res.data.data.list
            Toast.success('刷新成功');
            // this.imgBook.push.apply( this.imgBook,res.data.data.list)  //合并请求数组
          })


      // this.onLoad();

    },

    //搜索按钮
    searchBtn(){
      let list = {
        "type": this.categoryIndex,
        "sortCodeList": [],
        "page": 1,
        "pageSize": 18,
        searchType:this.code,
        searchValue:this.searchValue,
      }
      search(list)
          .then(res=>{
            // console.log(res.data.data.list)
            this.count = res.data.data.count
            if(this.count === 0 ){
              this.imgBook = []
              Toast({
                message: '暂无数据',
                icon: 'cross',
              });
            }
            this.imgBook = res.data.data.list
          })
    },
    onConfirm(value) {
     // console.log(value)
      this.value = value.name;
      this.code = value.code;
      this.showPicker = false;
      this.page = 1
      let list = {
        "type": this.categoryIndex,
        "sortCodeList": [],
        "page": 1,
        "pageSize": 18,
        searchType:value.code,
        searchValue:this.searchValue,
      }
      search(list)
          .then(res=>{
            // console.log(res.data.data.list)
            this.count = res.data.data.count
            // console.log(this.imgBook)
            // this.imgBook.push(res.data.data.list)
            this.imgBook.push.apply( this.imgBook,res.data.data.list)
            // console.log(this.imgBook)
          })

    },
    bookDetails(item, index) {
     // console.log(item)
      this.$router.push({path: '/bookDetails',query: {ids: item.pinyinName}})
    },
    //点击党校发行和相关党建
    clickcategory(index) { // 这里传入一个当前值// 1 :党校发行 2:相关党建
     // console.log(index)
      this.categoryIndex = index
      this.imgBook = []
      if(index === 1){
        this.page = 1
        let list = {
          "type": "1",
          "sortCodeList": [],
          "page": this.page,
          "pageSize": 18,
          searchType:this.code,
          searchValue:this.searchValue,
        }
        search(list)
            .then(res=>{
              // console.log(res.data.data.list)
              this.count = res.data.data.count
              // console.log(this.imgBook)
              // this.imgBook.push(res.data.data.list)
              this.imgBook.push.apply( this.imgBook,res.data.data.list)
              // console.log(this.imgBook)
            })
      }else if(index===2){
        this.page = 1
        let list = {
          "type": "2",
          "sortCodeList": [],
          "page": this.page,
          "pageSize": 18,
          searchType:this.code,
          searchValue:this.searchValue,
        }
        search(list)
            .then(res=>{
              // console.log(res.data.data.list)
              this.count = res.data.data.count
              // console.log(this.imgBook)
              // this.imgBook.push(res.data.data.list)
              this.imgBook.push.apply( this.imgBook,res.data.data.list)
              // console.log(this.imgBook)
            })
      }

    },
  },
}
</script>

<style scoped>
.bookTitlt{
  text-align: center;
  width: 2.547rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.redTltle {
  /*width: 10rem;*/
  height: 1.15rem;
  background-color: #af2536;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  text-align: center;
  line-height: 1.15rem;
}

.redText {
  padding: 0.267rem;
  font-family: PingFang-SC-Heavy;
  font-size: 0.373rem;
  font-weight: bolder;
  font-stretch: normal;
  color: #af2536;
  background-color: white;
}

.bookList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 1rem;

}

.items {
  margin: 0.38rem;
}

.bookpage {
  padding: 0.3rem 0;
  background-color: white;
}

.searchBtn {
  background-color: #af2536;
  border-radius: 0rem 0.053rem 0.053rem 0rem;
  width: 1.2rem;
  height: 1.04rem;
  line-height: 1.04rem;
  text-align: center;
  background-color: #929292;
  border-radius: 0rem 0.053rem 0.053rem 0rem;
  font-family: PingFang-SC-Medium;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  opacity: 0.8;
}

.active {
  background-color: #af2536;
  color: #ffffff !important;

}

.DXFXxgdx {
  width: 1.6rem;
  height: 0.7rem;
  line-height: 0.7rem;
  /*background-color: #af2536;*/
  border-radius: 0.04rem;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  /*opacity: 0.65;*/
  text-align: center;
}

.bgimg {
  background-image: url('../../assets/label.png');
  background-size: 100% 100%;
  width: 2rem;
  height: 1.05rem;
  line-height: 44px;
  text-align: center;
  font-size: 0.293rem;
  /*background-color: #1b6d85;*/
  /*z-index: 999;*/
  /*padding: 10px 16px;*/
  /*border-right: 1px gray solid;*/
}
</style>
